import { t } from 'i18next'
import React, { useEffect, useMemo, useState } from 'react'
import QRCode from 'qrcode.react'
import { Button } from '@kedacom/react-next'
import { useRequest } from 'ahooks'
import { Alert } from '../Alert'
import { IconCopy } from '../Icon'
import copy from 'copy-to-clipboard'
import { Wrap } from './style'
import { ShareProps } from './interface'
import { fetchShareLink } from '@/api/shareModal'
import { getMeetingTime } from '@/utils'

const Share = (props: ShareProps) => {
	const [entryUrl, setEntryUrl] = useState('')
	const { meetingInfo, type } = props
	const { data, loading } = useRequest(() => fetchShareLink(meetingInfo.meetingMoid))
	const time = useMemo(
		() => getMeetingTime(meetingInfo.startTime ?? '', meetingInfo.duration ?? 0, meetingInfo.duration === 0),
		[meetingInfo]
	)
	useEffect(() => {
		if (!loading) {
			if (data) {
				setEntryUrl(data)
			}
		}
	}, [data, loading])

	const onFullCopy = () => {
		if (type === 'virtual') {
			copy(
				t('会议名称') +
					'   ' +
					meetingInfo.name +
					'\r\n' +
					t('会议号码') +
					'   ' +
					meetingInfo.e164 +
					'\r\n' +
					t('入会链接') +
					'   ' +
					entryUrl +
					'\r\n'
			)
		} else if (type === 'meeting') {
			copy(
				t('会议名称') +
					'   ' +
					meetingInfo.name +
					'\r\n' +
					t('会议时间') +
					'   ' +
					time +
					'\r\n' +
					t('会议号码') +
					'   ' +
					meetingInfo.e164 +
					'\r\n' +
					t('入会链接') +
					'   ' +
					entryUrl +
					'\r\n'
			)
		}
		Alert(t('复制完整信息成功'))
	}
	return (
		<Wrap>
			<div className="body-main">
				<div className="left">
					<QRCode value={entryUrl} style={{ width: '150px', height: '150px' }} />
					<div className="img-text">{t('扫码入会')}</div>
				</div>
				<div className="right" style={{ marginLeft: '58px' }}>
					<div className="item-line">
						<div className="item-line-title">{t('会议名称')}</div>
						<div className="item-line-content">{meetingInfo.name}</div>
					</div>
					{props.type === 'meeting' && (
						<div className="item-line">
							<div className="item-line-title">{t('会议时间')}</div>
							<div className="item-line-content" title={time}>
								{time}
							</div>
						</div>
					)}
					<div className="item-line">
						<div className="item-line-title">{t('会议号码')}</div>
						<div className="item-line-content">{meetingInfo.e164}</div>
					</div>
					<div className="item-line">
						<div className="item-line-title">{t('入会链接')}</div>
						<div className="item-line-content">
							<div title={entryUrl}>{entryUrl}</div>
							<IconCopy
								onClick={() => {
									copy(entryUrl)
									Alert(t('复制成功'))
								}}
							></IconCopy>
						</div>
					</div>
				</div>
			</div>
			<div className="share-bottom">
				<Button type="primary" onClick={onFullCopy}>
					{t('复制完整信息')}
				</Button>
			</div>
		</Wrap>
	)
}
export default Share
